<template>
  <CommonTable :tableData="listData" :columnsData="columns" :showPagination="false">
    <template #lv>
      <span>{{ '会计科目' }}</span>
    </template>

    <template #operator="{ record }">
      <a-link type="primary" class="mr-2" :disabled="!isEdit" @click="handlerOperator(record)"
        >删除</a-link
      >
    </template>
  </CommonTable>
  <!-- 弹出框 -->
  <a-modal
    v-model:visible="removePopKey"
    title-align="start"
    class="chunk-delete-box"
    width="448px"
  >
    <template #title>
      <span class="confirm-pop">是否确认删除该科目</span>
    </template>
    <div class="chunk-delete-info-box info-pop">
      <icon-exclamation-circle-fill class="text-yellow-500" />
      删除后该科目无法恢复
    </div>
    <template #footer>
      <div class="w-full h-full flex justify-end items-center">
        <a-button @click="removePopKey = false">取消</a-button>
        <a-button type="primary" class="ml-2" @click="toRemove">删除</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, inject, watch, onMounted } from 'vue';
import { columns, getListEvent, getCheckListEvent } from './values';
const treeData = ref<any>([]);
const listData = ref<any>([]);
const defaultCheckedKeys = inject('defaultCheckedKeys') as any;
const removePopKey = ref<boolean>(false); // 删除弹窗
const currentRow = ref<any>({}); // 当前行数据
const isEdit = inject('isEdit');
/* 根据IDs 获取选中的树节点*/
const getCheckedNodes = (ids: any) => {
  const checkedNodes: any[] = [];
  const getCheckedNode = (nodes: any[]) => {
    nodes.forEach((node: any) => {
      if (ids.includes(node.key)) {
        checkedNodes.push(node);
      }
      if (node.children) {
        getCheckedNode(node.children);
      }
    });
  };
  getCheckedNode(treeData.value);
  return checkedNodes;
};

watch(
  defaultCheckedKeys,
  (v) => {
    if (v) {
      listData.value = getCheckedNodes(v);
    }
  },
  { immediate: true }
);

const handlerOperator = (record: any) => {
  removePopKey.value = true;
  currentRow.value = record;
};

/* 删除 */
const toRemove = () => {
  const index = listData.value.findIndex((item) => item.key === currentRow.value.key);
  listData.value.splice(index, 1);
  /* 删除defaultCheckedKeys所对应的key */
  const keyIndex = defaultCheckedKeys.value.findIndex((key) => key === currentRow.value.key);
  defaultCheckedKeys.value.splice(keyIndex, 1);
  removePopKey.value = false;
};
onMounted(async () => {
  // 获取所有的数据
  let res = await getListEvent();
  treeData.value = res;

  //已选科目
  let resDada = await getCheckListEvent();
  if (resDada.code === '00000') {
    defaultCheckedKeys.value = resDada.data.map((item) => item.id);
    listData.value = resDada.data.map((item) => {
      return {
        key: item.id,
        title: item.name
      };
    });
  }
});
</script>

<style lang="less" scope>
.chunk-delete-box {
  .arco-modal-wrapper {
    .arco-modal {
      padding: 0px;

      .arco-modal-header,
      .arco-modal-footer {
        border: 0;
      }

      .arco-modal-body {
        .chunk-delete-info-box {
          svg {
            color: #f1aa3c;
            width: 20px;
            height: 20px;
            position: relative;
            top: 2px;
          }
        }
      }
    }
  }
}
</style>
